import { useDispatch, useSelector } from 'react-redux'
import { clearCompletedTodo } from '../../store/actions/todo'

export default function TodoFooter() {
  const dispatch = useDispatch()
  const todo = useSelector((state) => state.todo)
  const completedLength = todo.filter((item) => item.done).length
  const handleClearDoned = () => dispatch(clearCompletedTodo())
  return (
    <footer className='footer'>
      <span className='todo-count'>
        <strong>0</strong> item left
      </span>
      <ul className='filters'>
        <li>
          <a className='selected' href='#/'>
            All
          </a>
        </li>
        <li>
          <a href='#/active'>Active</a>
        </li>
        <li>
          <a href='#/completed'>Completed</a>
        </li>
      </ul>
      {completedLength > 0 && (
        <button onClick={handleClearDoned} className='clear-completed'>
          Clear completed
        </button>
      )}
    </footer>
  )
}
